<template>
	<!-- 签到 -->
	<view id="signIn">

		<!-- 背景图 -->
		<image class="signIn_backImg" src="../../static/images/bg.png" />
		<!-- 身体 -->
		<view class="signIn_main">
			<!-- 头 -->
			<view class="signIn_header">
				<view class="signIn_header_img" style="width: 240rpx;">
					<image src="../../static/images/return@2x.png" style="width: 36rpx;height: 68rpx;padding: 36rpx 0 0 40rpx;"></image>
				</view>
				<text style="font-size: 34rpx;padding-top: 40rpx;">领取现金</text>
				<view class="null"></view>
			</view>
			<view class="signIn_main_header">
				<view>规则</view>
				<view>我的现金</view>
			</view>
			<view class="signIn_main_price">
				<view>0<text>元</text></view>
			</view>
			<view class="signIn_main_signIn">签到领现金</view>
			<!-- 对话框样式 -->
			<view class="signIn_main_dialogBox">
				<!-- 小三角形 -->
				<view class="triangle"></view>
				<view class="signIn_main_dialogBox_today">今日签到可领取一个现金红包</view>
				<view class="signIn_main_dialogBox_rateProgress">
					<view>1天</view>
					<view></view>
					<view>2天</view>
					<view></view>
					<view>3天</view>
					<view></view>
					<view>4天</view>
					<view></view>
					<view>5天</view>
					<view></view>
					<view>6天</view>
					<view></view>
					<view>
						<image src="../../static/images/treasure_box@2x.png" />
					</view>
				</view>
				<!-- 新人专享 -->
				<view class="new_pepople">
					<image src="../../static/images/NoPath_new_people@2x.png" />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style lang="less" scoped>
	page {
		background: #f1f1f1;
	}

	#signIn {

		/* 背景图 */
		.signIn_backImg {
			width: 100%;
			height: 1474rpx;
			position: fixed;
			z-index: -10;
		}

		// 头
		.signIn_header {
			display: flex;
			align-items: center;
		}

		// 身体
		.signIn_main {
			.signIn_main_header {
				position: relative;
				width: 100%;
				padding: 48rpx 0;
				text-align: center;
				color: #fff;
				font-size: 34rpx;

				view:first-child {
					position: absolute;
					left: 0;
					bottom: 48rpx;
					padding-left: 44rpx;
					font-size: 28rpx;
				}
			}

			.signIn_main_price {
				width: 100%;
				padding-bottom: 90rpx;
				text-align: center;

				view {
					display: inline-block;
					height: 114rpx;
					color: #fff;
					font-size: 100rpx;
					position: relative;
				}

				text {
					font-size: 48rpx;
					position: absolute;
					bottom: 0;
					left: 72rpx;
				}
			}

			.signIn_main_signIn {
				margin: 0 20rpx;
				height: 100rpx;
				border-radius: 50rpx;
				border: 2rpx solid rgba(255, 235, 171, 1);
				background: linear-gradient(180deg, #fff5de 0%, #ffd492 100%);
				font-size: 56rpx;
				font-weight: bold;
				line-height: 100rpx;
				text-align: center;
				color: #276300;
			}

			// 对话框样式
			.signIn_main_dialogBox {
				margin-top: 44rpx;
				background: rgba(255, 255, 255, 0.25);
				position: relative;

				// 三角形
				.triangle {
					width: 0;
					height: 0;
					border: 26rpx solid transparent;
					border-bottom: 26rpx solid rgba(255, 255, 255, 0.25);
					position: absolute;
					top: -26rpx;
					left: 50%;
					transform: translate(-50%, -50%);
				}

				.signIn_main_dialogBox_today {
					font-size: 34rpx;
					color: #fff;
					padding: 0 40rpx;
					padding-top: 40rpx;
				}

				.signIn_main_dialogBox_rateProgress {
					padding: 0 40rpx;
					padding-top: 40rpx;
					display: flex;
					justify-content: space-around;
					align-items: center;

					view:nth-child(odd) {
						width: 60rpx;
						height: 32rpx;
						background: #f25422;
						color: #fcae7a;
						font-size: 20rpx;
						text-align: center;
						line-height: 32rpx;
						border-radius: 16rpx;
					}

					// 线
					view:nth-child(even) {
						width: 44rpx;
						background: #f25422;
						height: 8rpx;
					}

					view:last-child {
						width: 52rpx;
						height: 52rpx;
						border-radius: 50%;
						line-height: 52rpx;
						padding: 4rpx 12rpx;
						box-sizing: border-box;

						image {
							width: 30rpx;
							height: 24rpx;
						}
					}
				}

				// 新人专享
				.new_pepople {
					padding: 40rpx 40rpx 0 40rpx;
					height: 200rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}
</style>
